<template>
    <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="750px">
        <a-spin :spinning="loading">
            <a-form :form="form">
                <a-row :gutter="[24, 0]">
                    <a-col :span="12">
                        <a-form-item class="mb-15" label="优惠券名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input  placeholder="请输入优惠券名称" v-decorator="['couponName',
                                {
                                    rules: [{ required: true, message: '请输入优惠券名称', whitespace: true }],
                                },
                            ]" maxLength="30"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item class="mb-15" label="优惠券类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-select class="flex-1" @change="changeSelect" placeholder="请选择优惠券类型"
                                v-decorator="['couponType', { rules: [{ required: true, message: '请选择优惠券类型' }] }]">
                                <!-- <a-select-option v-for="item in couponList" :key="item.value"
								:value="item.value">{{ item.name }}
							</a-select-option> -->
                                <a-select-option :value="1">你好
                                </a-select-option>
                                <a-select-option :value="2">不好
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="[24, 0]">
                <a-col :span="12">
					<a-form-item  class="mb-15" label="时间" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-range-picker class="w-full" placeholder="请选择优惠券有效期时间范围"  v-decorator="[
                'time',
                {
                  rules: [{ required: true, message: '请选择优惠券有效期时间范围' }],
                },
              ]"></a-range-picker>
					</a-form-item>
                </a-col>
                <a-col :span="12">
					<a-form-item  class="mb-15" label="性别" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group v-decorator="[
                'value',
                {
                  rules: [{ required: true, message: '请选择' }],
                },
              ]"  @change="onChange">
			      <a-radio :value="1">
			        男
			      </a-radio>
			      <a-radio :value="2" class="ml-25">
			        女
			      </a-radio>
			      
			    </a-radio-group>
					</a-form-item>
				</a-col>
            </a-row>
            <a-row :gutter="[24, 0]">
                <a-col :span="12">
					<a-form-item  class="mb-15" label="是否启用" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-switch  checked-children="开" un-checked-children="关"
					v-decorator="['isEnabled', { valuePropName: 'checked' }]" />
					</a-form-item>
                </a-col>
                <a-col :span="12">
					<a-form-item  class="mb-15" label="图片上传" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
											:show-upload="formgetFileLength(`images`) < 1"
											@uploadSuccess="formuploadSuccess($event, `images`)"
											v-decorator="[
	                  `images`,
	                  {
	                    rules: [{ required: true, message: '请上传图片', type: 'array' }],
	                    initialValue: [],
	                  },
	                ]" />
					</a-form-item>
				</a-col>
            </a-row>
            <a-row :gutter="[24, 0]">
                <a-col :span="12">
					<a-form-item  class="mb-15" label="是否启用" :label-col="labelCol" :wrapper-col="wrapperCol">
						<a-switch  checked-children="开" un-checked-children="关"
					v-decorator="['isEnabled', { valuePropName: 'checked' }]" />
					</a-form-item>
                </a-col>
                <a-col :span="12">
					<a-form-item  class="mb-15" label="规则" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-textarea placeholder="请输入本优惠券使用规则"v-decorator="['admark',
                                {
                                    rules: [{ required: true, message: '请输入优惠券名称', whitespace: true }],
                                },
                            ]"	maxLength="300"></a-textarea>
					</a-form-item>
                </a-col>
            </a-row>
            </a-form>
        </a-spin>
    </a-modal>
</template>
<script>
import {
		get
	} from 'lodash'
import {
    deductionDetail,getBanner
} from '@/api/newPet'
export default {
    data() {
        return {
            loading: false,
            isShow:true,
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            },
            details: {},
            showModal: false,
            titles: '新增',
            info: {},
            form: this.$form.createForm(this),

        }
    },
    computed: {

    },
    watch: {

    },
    async created() {

    },
    methods: {
       formgetFileLength(type) {//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
            formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path],
				})
			},
        changeSelect(e) {
console.log(e)
        },
        onChange(e){
            console.log(e.target.value)
        },
        cancel() {

            this.form.resetFields()
            this.showModal = false

        },
        confirmOk() {
            this.form.validateFields((err, values) => {
              
                if (!err) {
                    // this.loading = true
                    const {
                        info

                    } = this
                    if(values.time){
                        values.timeStart=this.$utils.getStartTime(values.time[0])
                        values.timeEnd=this.$utils.getEndTime(values.time[1])
                    }
                    let data={
                        id: info && info.id ? info.id : undefined,
                        ...this.$utils.trimValue(values),
                        isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
                    }
                    console.log('data', values)
                    return
                    const fun = info && info.id ? deductionDetail : deductionDetail
                    fun(data)
                        .then(() => {
                            this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
                            this.$emit('upload')
                            this.cancel()
                        })
                        .finally(() => {
                            this.loading = false
                        })
                }
            })
        },
        getData() {
            this.loading = true
            deductionDetail({ id: 1 }).then(data => {
                this.details = data
            }).finally(() => this.loading = false)
        },
        open(data) {
            this.info = data
            console.log(data,'111111')
            if (data.id) {
                this.titles = '修改'
            } else {
                this.titles = '新增'
            }
            this.showModal = true
            // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
            this.$nextTick(() => {
    	this.form.setFieldsValue({
    		isEnabled: true
            
    	})
    })
            // this.$emit('upload')
            // this.$nextTick(() => {
            //     this.form.setFieldsValue({
            // 					...res
            // 				})

            // 			})
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
    // width: 100px;
   

}
</style>
    